<template>
  <div id="userList">
      <div class="box_top">
        <div class="slash_title">轮播图</div>
      </div>
      <div class="userList_centent">
        <div class="btn">
          <el-button @click="newAdd" type="primary">新增</el-button>
        </div>
      <!-- table列表 -->
      <el-table :data="tableData" border style="width: 100%; margin-top: 20px">
        <el-table-column label="轮播图" align="center">
          <template slot-scope="scope">
            <el-popover placement="top-start">
                <img
                  slot="reference"
                  :src="scope.row.picture"
                  style="width: 200px; height: 100px; border-radius:10px"
                />
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              type="primary"
              @click="handleEdite(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
        <div class="mask" v-if="maskmode == 1">
          <div class="mask_agree">
            <div class="mask_top">
              <div class="left_agree"></div>
              <div class="left_title">轮播图 - 新增</div>
            </div>
            <div class="boximg">
              <el-upload
                  class="avatar-uploader"
                  action="https://php.zgsj1.com/index.php/hzt/bpdt.Upload/tttt"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  name="file">
                  <img v-if="imageUrl" :src="imageUrl" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </div>
            <div class="footer">
              <el-button @click="submitFun" type="primary">提交</el-button>
              <el-button @click="cancelFun" type="info">取消</el-button>
            </div>
          </div>
        </div>
        <div class="mask" v-if="maskmode == 2">
          <div class="mask_agree">
            <div class="mask_top">
              <div class="left_agree"></div>
              <div class="left_title">轮播图 - 编辑</div>
            </div>
            <div class="boximg">
              <el-upload
                  class="avatar-uploader"
                  action="https://php.zgsj1.com/index.php/hzt/bpdt.Upload/tttt"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  name="file">
                  <img v-if="imageUrl" :src="imageUrl" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </div>
            <div class="footer">
              <el-button @click="submitFun1" type="primary">提交</el-button>
              <el-button @click="cancelFun" type="info">取消</el-button>
            </div>
          </div>
        </div>
  </div>
</template>

<script>
import provinces from "@/util/provinces"
import { delTips } from "@/util/utils";
export default {
  data() {
    return {
     tableData:[],
      maskmode:0,
      imageUrl:'',
      editid:''
    };
  },
  mounted(){
     this.searchFun()
  },
  methods: {
    //查询
    searchFun(){
      this.$https(this.$api.api.lbt_show,{},"GET").then(res=>{
        console.log("轮播图查询",res);
        if(res.data.msg = '查询成功') {
          this.tableData = res.data.data
        } 
      })
    },
    //新增
    newAdd(){
      this.imageUrl = ''
      this.maskmode = 1
    },
    //编辑
    handleEdite(index,row) {
      console.log("编辑",row);
      this.imageUrl = row.picture
      this.maskmode = 2,
      this.editid = row.id
    },
    //新增提交
    submitFun(){
      if(this.imageUrl == '') {
        this.$message.warning("请选择新增图片！")
      } else {
        this.$https(this.$api.api.lbt_add,{picture:this.imageUrl},"POST").then(res=>{
          console.log("轮播图新增",res);
          if(res.data.msg == '新增成功！') {
            this.$message.success("新增成功！")
            this.maskmode = 0
            this.searchFun()
          }
        })
      }
    },
    submitFun1(){
      this.$https(this.$api.api.lbt_edit,{id:this.editid,picture:this.imageUrl},"GET").then(res=>{
        console.log("轮播图编辑",res);
        if(res.data.msg == "修改成功！") {
          this.$message.success("修改成功!")
          this.maskmode = 0
          this.searchFun()
        }
      })
    },
    //删除
    handleDelete:delTips(function(index,row){
      this.$https(this.$api.api.lbt_delete,{id:row.id},"POST").then(res=>{
        console.log("轮播图删除",res);
         if(res.data.msg == '删除成功！') {
            this.$message.success("删除成功！")
            this.searchFun()
         }
        })
    }),
    //新增取消
    cancelFun(){
      this.maskmode = 0
    },
    handleAvatarSuccess(res, file) {
      console.log("file",file);
      console.log("res",res);
      this.imageUrl = res.path;
    },
  },
};
</script>

<style scoped lang="less">
.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
}
.mask_agree {
  width: 450px;
  height: 360px;
  background-color: #fff;
}
.mask_top {
  width: 100%;
  height: 60px;
  background-color: #eaeaef;
  display: flex;
  justify-content: start;
  align-items: center;
}
.left_agree {
  width: 4px;
  height: 20px;
  background-color: black;
  margin-left: 20px;
}
.left_title {
  margin-left: 22px;
  font-size: 18px;
}
.footer {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 36px;
}
/deep/.el-table::before {
  height: 0;
}
/deep/.el-table::after {
  height: 0;
}
.lastrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.qwe {
  background-color: rgb(243, 243, 243);
  margin-left: 20px;
  width: 300px;
  height: 150px;
}
.avatar-uploader,.el-upload {
    width: 178px;
    height: 178px;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .boximg {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
  }
a {
  text-decoration: none;
}

.box_top {
  margin-bottom: 20px;
  .slash_title {
    border-left: 3px solid #000;
    padding-left: 10px;
  }
}
#userList {
  width: 85vw;
  height: 94vh;
  .userList_top {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    .el-input {
      width: 230px;
      margin: 0 30px;
    }
  }
  .userList_centent {
    margin-top: 10px;
    /deep/.el-dialog {
      .el-dialog__header {
        padding: 0px;
      }
      .titleStyle {
        padding: 20px;
        background: #f8f8f8;
        span {
          border-left: 5px solid #000;
          padding-left: 10px;
        }
      }
    }
  }
}
.top_flex {
  display: flex;
  margin: 20px 0;
  .el-input {
    width: 230px;
    // margin: 0 20px;
  }
  .el-select {
    width: 180px;
  }
}

.box_top {
  .slash_title {
    border-left: 3px solid #000;
    margin-bottom: 20px;
    padding-left: 10px;
  }
}
#userList {
  width: 85vw;
  height: 94vh;
  .userList_top {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    .el-input {
      width: 230px;
      margin: 0 30px;
    }
  }
}
.btn_bottom {
  margin-top: 40px;
}
  .rowline {
    display: flex;
    justify-content: left;
    align-items: center;
    margin-bottom: 20px;
  }
  .left {
  display: inline-block;
  width: 80px;
  line-height: 30px;
  text-align: right;
}
.btn {
  width: 100%;
  text-align: right;
}
</style>